<script>
import { auditRefund, remittance } from '@/api/mallApi/refund'

export default {
  name: 'InfoDetail',
  props: {
    dialogData: {
      type: Object,
      default: () => {}
    },
    activeName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 数量合计
      amount: 0,
      // 运费
      freight: 0,
      // 金额合计
      totalPrice: 0,
      goodsName: '',
      btnName: '',
      btn1Name: ''
    }
  },
  created() {},
  mounted() {
    this.dialogData.orderDetailesList.forEach((item) => {
      this.amount += item.amount
      this.totalPrice += item.subtotal
    })
    if (this.activeName === '1') {
      this.btnName = '同意退款'
      this.btn1Name = '驳回退款'
    } else if (this.activeName === '2') {
      this.btnName = '打款'
    } else {
      this.btnName = false
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    handleAuditRefund() {
      const params = {
        id: this.dialogData.id,
        mallCode: this.dialogData.mallCode,
        orderCode: this.dialogData.orderCode,
        reason: this.dialogData.reason,
        type: this.dialogData.type,
        rejectAmount: this.dialogData.rejectAmount,
        name: this.dialogData.name,
        phone: this.dialogData.phone,
        status: 2,
        expressName: this.dialogData.expressName,
        expressCode: this.dialogData.expressCode,
        auditReason: this.dialogData.auditReason
      }
      // 根据 activeName 判断是审核退款还是打款
      if (this.activeName === '1') {
        auditRefund(params)
          .then((res) => {
            if (res.code === '00000') {
              this.$message({
                message: '审核成功',
                type: 'success'
              })
              this.$emit('close')
              this.$emit('reLoad')
            }
          })
          .catch((err) => {})
      } else if (this.activeName === '2') {
        remittance({ id: this.dialogData.id })
          .then((res) => {
            if (res.code === '00000') {
              this.$message({
                message: '打款成功',
                type: 'success'
              })
              this.$emit('close')
              this.$emit('reLoad')
            }
          })
          .catch((err) => {})
      }
    },
    // 驳回退款
    handleRe() {
      const params = {
        id: this.dialogData.id,
        mallCode: this.dialogData.mallCode,
        orderCode: this.dialogData.orderCode,
        reason: this.dialogData.reason,
        type: this.dialogData.type,
        rejectAmount: this.dialogData.rejectAmount,
        name: this.dialogData.name,
        phone: this.dialogData.phone,
        status: 4,
        expressName: this.dialogData.expressName,
        expressCode: this.dialogData.expressCode,
        auditReason: this.dialogData.auditReason
      }
      this.$prompt('请输入驳回原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(({ value }) => {
          if (!value) {
            this.$message({
              type: 'warning',
              message: '请输入驳回原因'
            })
          }
          params.auditReason = value
          auditRefund(params)
            .then((res) => {
              if (res.code === '00000') {
                this.$message({
                  type: 'success',
                  message: '驳回成功'
                })
                this.$emit('reLoad')
              }
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '取消输入'
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
    }
  }
}
</script>

<template>
  <div class="InfoDetail">
    <div class="container">
      <div class="content">
        <div class="basic">
          <h3
            style="
              border-bottom: 1px solid #ebeef5;
              padding-left: 20px;
              padding-bottom: 15px;
              padding-top: 15px;
            "
          >
            基本信息
          </h3>
          <p style="padding-left: 20px">
            <span>订单编号：{{ dialogData.orderCode }}</span>
          </p>
          <p style="padding-left: 20px">
            <span>提交时间：{{ dialogData.createAt }}</span>
          </p>
          <p style="padding-left: 20px">
            <span
            >订单状态：{{
              dialogData.status === 1
                ? "待审核"
                : dialogData.status === 2
                  ? "已审核"
                  : dialogData.status === 3
                    ? "已打款"
                    : "驳回"
            }}</span
            >
          </p>
        </div>
        <div class="basic">
          <h3
            style="
              border-bottom: 1px solid #ebeef5;
              padding-left: 20px;
              padding-bottom: 15px;
              padding-top: 15px;
            "
          >
            退货信息
          </h3>
          <p style="padding-left: 20px">
            <span>退货原因：{{ dialogData.reason }}</span>
          </p>
          <p style="padding-left: 20px">
            <span>备注信息：{{ dialogData.remark }}</span>
          </p>
          <p style="padding-left: 20px">
            <span style="display: inline; margin-top: -100px">图片信息：</span>
          </p>
          <img
            :src="dialogData.img"
            alt=""
            style="width: 250px; margin-left: 120px; margin-top: -20px"
          />
        </div>
      </div>
      <!-- /.content -->
      <div class="table">
        <div class="title">
          <p>
            <span>退货商品：</span><span>数量：{{ amount }}</span
            >&nbsp;<span>金额：{{ (totalPrice / 100).toFixed(2) }}</span>
          </p>
        </div>
        <!-- /.title -->
        <el-table
          border
          :data="dialogData.orderDetailesList"
          style="width: 98%; margin: 0 auto"
        >
          <el-table-column prop="goodsName" label="商品标题"></el-table-column>
          <el-table-column prop="specList" label="规格、编号、条码">
            <template slot-scope="scope">
              <p>规格：{{ scope.row.specAttr }}</p>
              <p>编号：{{ scope.row.specAttrId }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="价格">
            <template slot-scope="scope">
              <p>{{ (scope.row.price / 100).toFixed(2) }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="数量"></el-table-column>
          <el-table-column prop="subtotal" label="小计">
            <template slot-scope="scope">
              <p>{{ (scope.row.subtotal / 100).toFixed(2) }}</p>
            </template>
          </el-table-column>
          <!--          <el-table-column prop="price" label="折价后"></el-table-column>-->
        </el-table>
        <div class="sum" slot="append" style="text-align: right">
          <!--在此处添加你想要插入在表格最后一行的内容-->
          <p>商品小计：￥{{ (totalPrice / 100).toFixed(2) }}</p>
          <p>数量合计：{{ amount }}</p>
          <p>运费：￥</p>
          <!--<p>折扣优惠：￥</p>-->
          <!--<p>优惠券优惠：￥</p>-->
        </div>
      </div>
      <!-- /.table -->
      <div class="btn">
        <!--靠右对齐-->
        <el-row type="flex" justify="end" style="margin-right: 20px">
          <el-button @click="handleClose">取消</el-button>
          <el-button @click="handleAuditRefund" v-show="btnName" type="primary"
          >{{ btnName }}
          </el-button>
          <el-button
            @click="handleRe"
            v-show="activeName === '1'"
            type="primary"
          >{{ btn1Name }}
          </el-button>
        </el-row>
      </div>
      <!-- /.btn -->
    </div>
  </div>
  <!-- /.container -->
</template>

<style scoped lang="scss">
.InfoDetail {
  width: 100%;
  background-color: #eeeeee;
  padding: 20px 0;

  .container {
    width: 98%;
    margin: 0 auto;
    min-height: 800px;
    background-color: #ffffff;
  }

  .content {
    display: flex;

    .basic {
      * {
        margin: 0;
        padding: 0;
      }

      width: 50%;
      height: 400px;
      border-right: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;

      p {
        margin-top: 15px;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }

  .table {
    .title {
      margin-top: 20px;
      border-bottom: 1px solid #ebeef5;
      color: red;
      font-weight: bold;
      margin-bottom: 20px;

      p {
        margin-bottom: 20px;
        margin-left: 20px;
      }
    }
  }

  .sum {
    * {
      margin: 0;
      padding: 0;
    }

    width: 98%;
    margin: 0 auto;
    border-bottom: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
    padding-right: 20px;
    padding-top: 20px;

    p {
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .btn {
    margin-top: 20px;
    padding-bottom: 20px;
  }
}
</style>
